<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" th:href="@{/res/css/amazeui.min.css}">
    <link rel="stylesheet" th:href="@{/res/css/admin.css}">
    <script th:src="@{/js/jquery-1.9.1.js}"></script>
    <script th:src="@{/myplugs/js/plugs.js}"></script>
    <link rel="stylesheet" th:href="@{/amazeui/amazeui.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome-4.6.3/css/font-awesome.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" tppabs="http://res.layui.com/layui/dist/css/layui.css"
          media="all">
    <script th:src="@{/layui/layui.js}"></script>
</head>

<body>

<div class="admin-content-body">
    <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">菜单管理</strong><small></small></div>
        <div style="float: right">共<span id="total"></span>条记录</div>
    </div>

    <hr>

    <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
            <div class="am-btn-toolbar">
                <div class="am-btn-group am-btn-group-xs">
                    <button class="layui-btn" onclick="addmenu('添加菜单')">
                        添加
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="am-g" style="margin-top: 5px;">
        <div class="am-u-sm-12">

            <table class="layui-table">
                <thead>
                <tr>
                    <th> 菜单名称</th>
                    <th> URL</th>
                    <th>操作</th>
                </tr>
                </thead>

                <tbody id="menuTable">
                </tbody>

            </table>
            <div id='page' style="text-align: center"></div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    var size = 8;      //每页的数据行
    var total = 0;     //总数据量
    var data;


    function cutPage() {
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage,
                layer = layui.layer;
            //总页数大于页码总数
            laypage.render({
                elem: 'page'
                , count: $("#total").html()
                , first: '首页'
                , last: '尾页'
                , prev: '<em>上一页</em>'
                , next: '<em>下一页</em>'
                , limit: size
                , jump: function (obj) { //jump主要是包含要执行的函数
                    getSpuList(obj.curr)
                }
            })
        })
    }


    $(function () {
        var url = "/menu/selectMenu";
        $.get(url, function (data) {
            total = data.length;
            $("#total").html(total)
            cutPage()
        });
        getSpuList(1);
    });

    //获取商品信息列表
    function getSpuList(pageNum) {
        var url = "/menu/selectByPage?pageNum=" + pageNum + "&pageSize=" + size;
        $.get(url, function (data) {
            setContent(data);
        });
    }


    //渲染页面
    function setContent(data) {
        var str;
        for (var i in data) {
            str += '<tr>';
            str += '<td>' + data[i].name + '</td>';
            str += '<td>' + data[i].url + '</td>';
            str += '<td>';
            str += '<button type="button"  class="layui-btn" onclick="editMenu(\'编辑菜单\',' + data[i].menuId + ',' + "\'" + data[i].name + "\'" + "," + data[i].id + "," + data[i].level + ',' + "\'" + data[i].url + "\'"+')"><span class="am-icon-pencil-square-o"></span> 编辑<tton>';
            str += '<button type="button" class="layui-btn layui-btn-danger" onclick="delMenu(\'删除菜单\',' + data[i].id + ')"><span class="am-icon-trash-o"></span> 删除<tton>';
            str += '</td>';
            str += '</tr>';
        }
        if (str != "" || str != null) {
            $("#menuTable").html(str);
        } else {
            $("#menuTable").html("<br/><span style='width:50%;height:100px;display:block;margin:0 auto;'>暂无数据</span>"); //渲染页面
        }
    }


    //更新相应页面的渲染
    $(document).on('click', '.hitPage', function (e) {
        hitPage = $(this).children().text();
        var url = "/menu/selectByPage?pageNum=" + hitPage + "&pageSize=" + size;
        $.get(url, function (data) {
            setContent(data);
        });
        $(this).addClass('am-active');
        $(this).siblings().removeClass('am-active');
    });


    //编辑
    function editMenu(title, menu_id, name, id, level,url) {
        $.jq_Panel({
            title: title,
            iframeWidth: 450,
            iframeHeight: 300,
            url: "/editMenu?name=" + name + "&menu_id=" + menu_id + "&id=" + id + "&level=" + level+"&url=" + url
        });
    }

    //删除
    function delMenu(title, id) {
        $.jq_Panel({
            title: title,
            iframeWidth: 350,
            iframeHeight: 100,
            url: "/deleteMenu?id=" + id
        });
    }

    //新增
    function addmenu(title) {
        $.jq_Panel({
            title: title,
            iframeWidth: 450,
            iframeHeight: 300,
            url: "/addMenu"
        });
    }

</script>
</html>